<!--我的卡包 信用卡-->
<template>
  <div>
    <!-- <van-nav-bar title="卡管理" left-arrow @click-left="$router.back()" class="black"></van-nav-bar> -->
    <div class="body-box oh" style="height:100vh;overflow: auto;">
      <!-- 信用卡列表 -->
      <div>
          <!-- 卡列表 -->
          <div class="body-box h-100v" v-if="cardEditData.bankCode">
            <ul class="pad-30 card-list">
              <li class="fff mag-b-20">
                <div class="fiex">
                  <div class="back-logo-box">
                    <img class="back-logo" :src="cardEditData.bankCode|fmtBankimsrc" />
                  </div>
                  <div
                    class="f-40 mag-l-30"
                  >{{cardEditData.bankCode|backName}}【{{cardEditData.bankCard|backOrder}}】</div>
                </div>
                <div class="mag-t-100 f-40">
                  <div class="fiex f-left">
                    <div class="fiex1">账单日:{{cardEditData.statementDate}}</div>
                    <div class="fiex1">还款日:{{cardEditData.repaymentDate}}</div>
                    <div>
                      距离还款日:
                      <span class="f-50">{{cardEditData.countDown}}</span> 天
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <!-- 账单日 -->
            <div class="f-left">
              <van-cell
                @click="selDataOpen(1)"
                title="账单日"
                is-link
                v-model="cardEditData.statementDate"
              />
              <van-cell
                @click="selDataOpen(2)"
                title="还款日"
                is-link
                v-model="cardEditData.repaymentDate"
              />
              <van-field
                label="预留手机号"
                v-model="cardEditData.reservePhone"
                placeholder
                class="field__label_200 f-left mag-t-20"
              />
            </div>
            <div
              style="background: rgb(79, 139, 244);
                border-radius: 5px;
                width: 90%;
                text-align: center;
                color: white;
                font-size: 0.4rem;
                padding: 10px;
                margin: auto;
                margin-top: 20px;"
              @click="saveBtn"
            >保存</div>
            <div
              @click="delCardBtn"
              style="background: #fff;
                border-radius: 5px;
                width: 90%;
                text-align: center;
                color: #EB4D4DFF;
                font-size: 0.4rem;
                padding: 10px;
                margin: auto;
                margin-top: 20px;"
            >删除信用卡</div>
          </div>
      </div>
      <!-- 头部切换end -->
    </div>
    <!-- 添加卡 -->
    <!-- <van-popup v-model="show" position="bottom">
      <div @click="addJumCard('CC')" class="vont-bottom pad-20">信用卡</div>
      <div @click="addJumCard('SC')" class="vont-bottom pad-20">储蓄卡</div>
    </van-popup>-->
    <!--账单日 -->
    <van-popup v-model="showTip" position="bottom" :overlay="true">
      <van-area
        :area-list="selDataJson"
        @cancel="showTip=false"
        columns-num="1"
        title
        @confirm="selData"
      />
    </van-popup>
  </div>
</template>

<script>
var self = "";
export default {
  data() {
    return {
      selDataJson: {
        province_list: {}
      }, //选择的日期集合
      showTip: false, //显示弹窗
      count: 0, //刷新次数
      selFoot: 1,
      isLoading: false, //刷新状态
      stopplan: false,
      tostopa: false,
      tostop: false,
      isActive: false,
      Cardlist: [],
      cardEditData: {}, //卡详情数据
      userId: "" //用户id
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    self = this;
    //日期列表
    for (var i = 1; i < 32; i++) {
      self.selDataJson.province_list[i] = i;
    }
    self.init(); //加载数据
  },
  components: {},
  //方法定义
  methods: {
    async saveBtn() {
      //保存
      if (self.cardEditData.reservePhone == "") {
        self.$toast("请输入手机号");
        return;
      }
      if (self.cardEditData.statementDate == self.cardEditData.repaymentDate) {
        //账单日与还款日不可以为同一天
        self.$toast("账单日与还款日不可以为同一天");
        return;
      }
      var getCard = await this.$axios(
        "https://community.1818pay.cn/customer/bankCard/update",
        {
          //接口列表
          type: "2", //1.储蓄  2.信用
          id: self.cardEditData.id,
          token: localStorage.getItem("token"),
          statementDate: self.cardEditData.statementDate, //账单日
          repaymentDate: self.cardEditData.repaymentDate, //还款日
          reservePhone: self.cardEditData.reservePhone //预留手机号
        },
        "post"
      );
      if (getCard.code == 1000) {
        self.$toast("修改成功");
      } else {
        self.$toast(getCard.message);
      }
    },
     delCardBtn() {
      //删除卡
      if (self.cardEditData.reservePhone == "") {
        self.$toast("请输入手机号");
        return;
      }
      if (self.cardEditData.statementDate == self.cardEditData.repaymentDate) {
        //账单日与还款日不可以为同一天
        self.$toast("账单日与还款日不可以为同一天");
        return;
      }
     self.$dialog
        .confirm({
          title: "提示",
          message: "是否删除当前信用卡"
        })
        .then( async() => {
               var getCard = await this.$axios(
                "https://community.1818pay.cn/customer/bankCard/delete",
                {
                //接口列表
                id: self.cardEditData.id,
                token: localStorage.getItem("token"),
                },
                "post"
            );
            if(getCard.code == 1000) {
                self.$toast("删除成功")
                setTimeout(()=>{
                     self.$router.back();
                },800)
            } else {
                self.$toast(getCard.message);
            }
        })
        .catch(() => {
          // on cancel
        });
      return;

    },
    selData(val) {
      //选择的日期
      //1:账单日 2:还款日
      if (self.selType == 1) {
        self.cardEditData.statementDate = self.PrefixInteger(val[0].code, 2);
      } else {
        self.cardEditData.repaymentDate = self.PrefixInteger(val[0].code, 2);
      }
      //计算还款天数
      self.cardEditData.countDown = self.$fmthkdate(
        self.cardEditData.statementDate,
        self.cardEditData.repaymentDate
      );
      self.$forceUpdate();
      self.showTip = false;
    },
    selDataOpen(val) {
      //1:账单日 2:还款日
      self.selType = val;
      self.showTip = true;
    },
    // addCard() {
    //   //添加卡弹层开启
    //   self.show = true;
    // },
    addCard() {
      //添加信用卡
      axios
        .get(
          "https://community.1818pay.cn/customer/customer/feignCustomerInfo",
          {
            //是否实名
            params: {
              customerId: self.userid
            }
          }
        )
        .then(res => {
          if (res.data.code == "1000") {
            var ress = JSON.parse(res.data.data);
            if (ress.nameState == 1) {
              self.$router.push("/addCard");
            } else {
              return $th.$toast("请先实名");
            }
          } else {
            return $th.$toast(res.data.message);
          }
        });
    },
    addJumCard(type) {
      //添加卡 type: SC”储蓄卡，“CC”信用卡
      self.show = false;
      setTimeout(() => {
        if (type == "SC") {
          self.$router.push("/addSavingsDepositCard");
          return;
        }
        if (type == "CC") {
          self.$router.push("/addCardPage");
          return;
        }
      }, 100);

      // $router.push('/addSavingsDepositCard')
    },
     init() {
      self.cardEditData = JSON.parse(localStorage.getItem("cardEditData"));
      console.log(self.cardEditData);
    },
    selTitle(val) {
      //标签切换
      if (val == 0) {
        //信用卡
        this.$router.push("/creditCardPage");
        return;
      }
      if (val == 1) {
        //储蓄卡
        this.$router.push("/savingsDepositCard");
        return;
      }
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
@import "./index.css";
</style>